import React from 'react';
import { Modal, Descriptions, Button, Space, Tag } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import styles from './MessageDetail.module.less';

interface MessageDetailProps {
  visible: boolean;
  onClose: () => void;
  message: any; // 根据实际数据结构定义类型
}

const MessageDetail: React.FC<MessageDetailProps> = ({
  visible,
  onClose,
  message
}) => {
  return (
    <Modal
      title="消息详情"
      open={visible}
      onCancel={onClose}
      width={720}
      footer={null}
      className={styles.detailModal}
    >
      <div className={styles.header}>
        <h2>{message?.title}</h2>
        <Space size={16}>
          <Tag color={message?.type === 'verification' ? 'blue' : 'orange'}>
            {message?.subType}
          </Tag>
          <span className={styles.time}>{message?.time}</span>
        </Space>
      </div>
      
      <div className={styles.content}>
        {message?.content}
      </div>

      {message?.attachments && (
        <div className={styles.attachments}>
          <h3>附件</h3>
          <Space direction="vertical">
            {message.attachments.map((file: any, index: number) => (
              <Button
                key={index}
                type="link"
                icon={<DownloadOutlined />}
                onClick={() => {}}
              >
                {file.name}
              </Button>
            ))}
          </Space>
        </div>
      )}
    </Modal>
  );
};

export default MessageDetail; 